<!-- WEB 仓库 》 展示 -->

<template>
  <el-form ref="form" :class="showClass" v-bind="config" :model="one || state.one">
    <!-- 展示标题 -->
    <div v-if="title" :class="`${className}-title`">{{ title }}</div>

    <!-- 展示插槽 -->
    <slot />
  </el-form>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import mixPath from '../mixPath'
import WebForm from '../WebForm'

const name = 'WebShow'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name,

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [mixPath],

  /**
   * 属性注册 (抽取以便查阅)
   */
  props: CORE.WEB[name],

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 尺寸
     */
    size: WebForm.computed.size,

    /**
     * 标签文字个数
     */
    wordNum: WebForm.computed.wordNum,

    /**
     * 最终的标签宽度
     */
    myLabelWidth: WebForm.computed.myLabelWidth,

    /**
     * 表单配置
     */
    config() {
      const { elProps, labelPosition, myLabelWidth, colon, size } = this
      return {
        ...elProps,
        labelPosition,
        labelWidth: myLabelWidth,
        labelSuffix: colon,
        size,
      }
    },

    /**
     * 展示样式类
     */
    showClass() {
      const { className, size } = this
      const sizeStr = size ? ` CoreWeb-Show-${size}` : ''
      return `${className}${sizeStr}`
    },
  },
}
</script>
